import React from 'react';
import "./react-bootstrap-table.min.css"
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';

//npm install react-bootstrap-table --save

const products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    products.push({
      id: id,
      name: '分类' + id,
      content: '分类描述'
    });
  }
}

addProducts(10);

function onAfterSaveCell(row, cellName, cellValue) {
  // console.log("Save cell '" + cellName + "' with value '" + cellValue + "'");
  // console.log("Thw whole row :");
  // console.log(row);
  // alert("Save cell '" + cellName + "' with value '" + cellValue + "'");
}

var selectRowProp = {
  mode: "checkbox", // or checkbox
  bgColor: "rgb(200, 215, 240)",
  clickToSelect: true
};

var cellEditProp = {
  mode: "click",
  blurToSave: true,
  afterSaveCell: onAfterSaveCell
}

class CatTableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <BootstrapTable data={ products } insertRow={true} deleteRow={true} selectRow={selectRowProp}
                      cellEdit={cellEditProp}>
        <TableHeaderColumn dataField='id' isKey={ true }>编号</TableHeaderColumn>
        <TableHeaderColumn dataField='name' editable={false}>分类</TableHeaderColumn>
        <TableHeaderColumn dataField='content'>分类描述</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

export default CatTableComponent;
